<template>
    <div>
        <cvue-dialog
            :dialogVisible="editDormVisible"
            title="修改宿舍楼"
            :isShowFoot="true"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <el-form label-width="120px">
                    <el-form-item label="宿舍名称">
                        <el-input  v-model.trim="name" maxlength="30"></el-input>
                    </el-form-item>
                     <el-form-item label="楼层数">
                        <el-input-number v-model="floorCount" :disabled="true"  :min="1" :max="1000000" ></el-input-number>
                    </el-form-item>
                     <el-form-item label="房间总数">
                         <el-input-number v-model="roomCount" :disabled="true" :min="1" :max="1000000" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="床位总数">
                         <el-input-number v-model="bedCount" :disabled="true" :min="1" :max="1000000" ></el-input-number>
                    </el-form-item>
                     <el-form-item label="楼管">
                        <el-button @click="selectAdminer" type="primary" icon="el-icon-plus">添加楼管</el-button>
                        <div>
                            <el-tag style="margin: 10px 10px 0 0;"
                                v-for="tag in adminerSelection"
                                :key="tag.name"
                                closable
                                @close="removeAdminer(tag)" >
                                {{tag.name}}
                                </el-tag>
                        </div>
                    </el-form-item>
                     <el-form-item label="wifi">
                        <el-button @click="selectWifi" type="primary" icon="el-icon-plus">添加wifi</el-button>
                        <div>
                            <el-tag style="margin: 10px 10px 0 0;"
                                v-for="tag in wifiSelection"
                                :key="tag.name"
                                closable
                                @close="removeWifi(tag)" >
                                {{tag.name}}
                                </el-tag>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import {getDormById} from '@/api/dormApi'
export default {
    components: {
        cvueDialog
    },
    computed: {
        editDormVisible () {
            return this.$store.state.dorm.editDormVisible
        },
        editDorm () {
            return this.$store.state.dorm.editDorm
        },
         wifiSelection () {
            return this.$store.state.dorm.wifiSelection
        },
         adminerSelection () {
            return this.$store.state.dorm.adminerSelection
        }
    },
    data () {
        return {
            name: '',
            floorCount: 1,
            roomCount: 1,
            bedCount: 1,
            admins: []
        }
    },
    methods: {
       
        openDialog () {
            getDormById(this.editDorm.id).then(res => {
                this.name = res.name
                this.floorCount = res.floorCount
                this.roomCount = res.roomCount
                this.bedCount = res.bedCount
                this.$store.state.dorm.wifiSelection = res.wifis || [] 
                this.$store.state.dorm.adminerSelection = res.admins || []
            })
        },
        confirmDialog () {
            if (!this.name) {
                this.$message.error('请填写名称')
                return
            }
            var param = {
                // schoolId: this.$store.state.common.cookiesObj.schoolId,
                name: this.name,
                // floorCount: this.floorCount,
                //  floorRoomCount: this.roomCount / this.floorCount,
                // bedCount: this.bedCount,
                wifis: this.wifiSelection,
                admins: this.adminerSelection,
                id: this.editDorm.id
            }
            this.$store.dispatch('dorm/editDorm', param).then(res => {
                this.$message.success('修改成功')
                this.closeDialog()
            })
        },
        closeDialog () {
            this.$store.commit('dorm/hideEditDorm')
        },
        selectAdminer () {
             this.$store.commit('dorm/showAdminer')
        },
        selectWifi () {
             this.$store.commit('dorm/showWifi')
        },
        removeWifi (tag) {
            this.$store.commit('dorm/removeWifi', tag)
        },
        removeAdminer (tag) {
            this.$store.commit('dorm/removeAdminer', tag)
        }
    }
}
</script>
<style scoped>

</style>
